<template>
	<view class="services">
<!-- 		<view>
			<view v-if="!$isIos()" style="width: 100%;height: 44px;background-color: #fff;"></view>
			<uni-nav-bar  color="#fff" backgroundColor="#fff" :border="false" >
				<block v-slot:left>
					<uni-icons class="rr-icons" color="#000" type="back" @click="goURl()" size="25"></uni-icons>
				</block>
				<view style="width: 100%;text-align: center;">
					<text style="font-size: 16px;color: #000;font-weight: 700;line-height: 44px;">区域售后</text>
				</view>
			</uni-nav-bar>
		</view> -->
		<view class="contents">
			<view class="hederList">
				<view class="allperfor"  @click="$goURl('/pages/personal/services/jilu?money='+data.getAgent.orderMoney)">
					<text class="money">{{$toFiexd(data.getAgent.orderMoney||0.00,2)}}</text>
					<text class="allMoney">总销售业绩</text>
				</view>
				<view class="shux"></view>
				<view class="allperfor"  @click="$goURl('/pages/personal/services/list?code=0')">
					<text class="money">{{$toFiexd(data.getAgent.total_performance||0.00,2)}}</text>
					<text class="allMoney">代理分红</text>
				</view>
				<view class="shux"></view>
				<view class="allperfor" @click="$goURl('/pages/personal/services/list?code=1')">
					<text class="money">{{$toFiexd(data.getAgent.performance||0.00,2)}}</text>
					<view style="display: flex;align-items: center;">
						<text class="allMoney">月代理分红</text>
					</view>
<!-- 					<view style="display: flex;align-items: center;">
						<text class="allMoney" @click="agentExchange">兑换</text>
					</view> -->
					
				</view>
			</view>
<!-- 			<view class="userlins">
				<view class="userMoney" v-for="(lin,index) in data.userList" :key="index" @click="userClick(lin.id)" :class="data.actvid==lin.id?'actvList':''">
					<text>{{lin.money}}</text>
					<text>{{lin.name}}</text>
				</view>
			</view> -->
		</view>
		<!-- 记录 -->
		<empty v-if="data.getAllData.length==0"></empty>
		<view class="agentContent" v-else>
			<scroll-view style="height: 100%;" scroll-y @scrolltolower='getList'>
				<view class="forAgent" v-for="(lin,index) in data.getAllData" :key="index">
					<view class="agentImg">
						<image :src="lin.shop_head?lin.shop_head:$defaultAvatar" ></image>
					</view>
					<view class="userText">
						<text class="textp">{{lin.name}}</text>
						<text class="textd">{{lin.mobile}}</text>
						<text class="textd">{{lin.province+lin.city+lin.area+lin.address}}</text>
						
					</view>
					<!-- <view class="consumption">
						<text class="tept">个人消费</text>
						<text class="consumMoney">{{$toFiexd(lin.person_money||0.00,2)}}</text>
					</view> -->
				</view>
			</scroll-view>
		</view>
		<!-- 弹出层 -->
		<view class="vague" v-if="data.errnoIndex==1">
			<view class="vagueContent">
				<view>
					<text>{{data.errnoMsg}}</text>
				</view>
				<view class="bottomList">
					<text @click="returnList">点击返回上一页</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onReachBottom} from "@dcloudio/uni-app";
	import yearsPicker from '@/components/years-picker/years-picker.vue'
	const {proxy} = getCurrentInstance();
	const data = reactive({
		userList:[
			{name:'普通用户',money:0,id:0},
			{name:'消费用户',money:0,id:1},
			{name:'月新增消费用户',money:0,id:2},
		],
		actvid:0,
		single:'',
		obtainYear:'',
		getAgent:{},
		getAllData:[],		//获取用户信息
		page:0,
		pages:1,
		size:10,
		errnoIndex:'',		//是否是代理
		errnoMsg:'',
	})
	onLoad((option)=>{
		getData()
	})
	onShow(()=>{
		let dates = new Date()
		let yer = dates.getFullYear()
		let month = dates.getMonth()+1
		data.obtainYear = yer +'-'+ month +'月'
		
	})
	onReachBottom(()=>{
		getList()
	})
	// 点击查看对应记录
	function userClick(id){
		data.page=0
		data.pages=1
		data.getAllData = []
		data.actvid = id
		getList()
	}
	function agentExchange(){
		proxy.$request({
			url: `api/agentExchange/`,
				method: 'POST',
				data:{
					money:Number(data.getAgent.performance)
				},
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					getData()
				}
			})
	}
	function getData(){
		proxy.$request({
			url: `api/agent/`,
			method: 'POST',
			success(res) {
				data.errnoIndex = res.errno
				data.errnoMsg = res.errmsg
				if(res.errno==0){
					// data.getAgent = res.data
					data.getAgent['orderMoney']=res.data.total_performance
					data.userList[0].money = res.data.ordinary
					data.userList[1].money = res.data.consumption
					data.userList[2].money = res.data.newConsumption
					getList()
				}else{
					// uni.showToast({
					// 	icon:'none',
					// 	title:res.errmsg
					// })
				}
			}
		})
		proxy.$request({
			url: `api/agentRecord/?page=${data.page}&size=${data.size}&code=${data.actvid}`,
			method: 'GET',
			success(res) {
				data.getAgent['total_performance']=res.data.totalMoney
				data.getAgent['performance']=res.data.moonTotalMoney
				// data.getAllData = [...data.getAllData,...res.data.data]
				// data.pages = Math.ceil(res.data.total / data.size)
			}
		})
	}
	function returnList(){
		uni.switchTab({
			url:'/pages/personal/index'
		})
	}
	function getList(){
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url: `api/agent/?page=${data.page}&size=${data.size}&code=${data.actvid}`,
				method: 'GET',
				success(res) {
					data.getAllData = [...data.getAllData,...res.data.data]
					data.pages = Math.ceil(res.data.total / data.size)
				}
			})

			
		}
	}
	// function bindobtainYear(e){
	// 	console.log(e,'*****');
	// 	data.obtainYear = e
	// }
	function goURl(){
		uni.navigateBack()
	}
	
	function maskClick(e){
		console.log('maskClick事件:', e);
	}
</script>

<style lang="scss" scoped>
	.services{
		height: calc(100vh - 50px);
		.contents{
			width: 100%;
			.hederList{
				background-color: #e14b30;
				height: 120px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.allperfor{
					width: 48%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.money{
						font-weight: 700;
						font-size: 20px;
						color: #fff;
					}
					.allMoney{
						color: #fff;
						font-size: 14px;
					}
				}
				.shux{
					width: 1px;
					height: 60px;
					background-color: #fff;
				}
			}
			.userlins{
				width: 100%;
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				padding: 20px 0;
				.userMoney{
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.actvList{
					color: #e14b30 !important;
					font-weight: 700 !important;
				}
			}
		}
		.agentContent{
			padding: 10px;
			margin-top: 10px;
			background: #fff;
			.forAgent{
				display: flex;
				padding: 10px;
				border-bottom: 1px solid #f5f5f5;
				.agentImg{
					width: 50px;
					height: 50px;
					margin-right: 10px;
					image{
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
				}
				.userText{
					// width: 50%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					.textp{
						font-weight: 700;
						font-size: 15px;
						color: #333;
					}
					.textd{
						font-size: 15px;
						color: #333;
					}
				}
				.consumption{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					.tept{
						font-size: 14px;
						color: #333;
					}
					.consumMoney{
						color: #e14b30;
					}
				}
			}
		}
		.vague{
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			height: 100vh;
			background-color: rgba(10, 10, 10, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			.vagueContent{
				width: 80%;
				height: 200px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				.bottomList{
					width: 50%;
					background-color: #e14b30;
					border-radius: 20px;
					padding: 6px 10px;
					text-align: center;
					text{
						color: #fff;
					}
				}
			}
		}
	}
	::v-deep .pickerSelect1{
		display: none;
	}
	::v-deep .uni-input1{
		border-bottom: none;
	}
	::v-deep .pickerText1{
		color: #fff;
		font-size: 14px;
	}
</style>